<template>
	<view class="news-list">
		<view v-for="news in newsList" :key="news.id" class="news-item">
			<view class="news-card" hover-class="news-card-hover" @click="details(news.id)">
				<view class="news-img">
					<image :src="news.img"></image>
				</view>
				<view class="news-title">{{ news.title }}</view>
				<view class="news-date">
					<text>
						{{ news.date }}
					</text>
					<text class="news-read">
						{{ news.read }} 阅读
					</text>
				</view>
				<view class="news-preface">{{ news.preface }}</view>
			</view>
		</view>
	</view>
</template>



<script>
	import newsList from '@/data/news.js';

	export default {
		data() {
			return {
				newsList: newsList,
			};
		},
		methods: {
			details(id) {
				uni.navigateTo({
					url: 'details?id=' + id
				});
			}
		},
	};
</script>



<style lang="scss">
	.news-list {
		background-color: #f2f2f3;
		min-height: 100vh;
		padding-top: 0.5rem;
		padding-bottom: 1rem;

		.news-card {
			margin: 1.5rem 1rem 0 1rem;
			padding: 1rem 1rem;
			background-color: white;
			border-radius: 1rem;
		}
		
		.news-card-hover {
			background-color: #f5f5f5;
		}

		.news-img {
			height: 8rem;
			margin: -1rem -1rem 0 -1rem;
			border-bottom: 1px solid #f2f2f3;
			border-radius: 1rem 1rem 0 0;
			overflow: hidden;

			image {
				width: 100%;
				object-fit: cover;
			}
		}

		.news-title {
			margin-top: 0.2rem;
			font-size: 1.2rem;
			font-weight: bold;
		}

		.news-date {
			color: #666666;
			font-size: 0.8rem;
		}

		.news-read {
			margin-left: 0.5rem;
		}

	}
</style>
